<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
        }


        p{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>
<body>
    <div></div>


    <p></p>
    <script>
        // opacity   透明度    0~1  
        // left     0~1000
        // top      0~1000
        // width    0~1000
        // height   0~1000 


        /// 需求  opacity 跟 left top width height 共同使用一个函数 
        // 实现 运动效果  

        // 只需要单独把opacity拿出来判断 


        // 拿到opacity 之后   乘以100 
        // 然后 具有渐变效果 
        // 重新赋值的会后 再除以100 
        function move(ele,type,target,timer){
            // 判断是否是opacity  //如果是 目标值 乘以100 
            if(type === 'opacity') target *= 100;
            const t = setInterval(function(){
                let current
                if(type === 'opacity'){
                    current = window.getComputedStyle(ele)[type] * 100;
                }else{
                    current = parseInt(window.getComputedStyle(ele)[type]);
                }
                // 实时获取 最新的样式值 
                
                // 计算运动距离 
                let duration = (target-current) / 10;

                duration = duration>0?Math.ceil(duration):Math.floor(duration);

                if(current === target){
                    clearInterval(t)
                }
                else{
                   if(type === 'opacity'){
                    ele.style[type] = (current + duration) / 100;
                   }else{
                     ele.style[type] = current + duration + 'px';
                   }
                }

            },timer)
        }

        var divele = document.querySelector('div');
        divele.onclick = function(){
            // move(divele,'top',610,20);
            move(divele,'opacity',0.61,20);

        }


        // 以上只能  一个动画一个效果  
        // 思考 如何  一个动画  多个效果  
        

    </script>
</body>
</html>